3011

15 分钟

#HTML 的 <iframe> 标签

HTML 元素 <iframe> 表示嵌套的浏览上下文。它能够将另一个 HTML 页面嵌入到当前页面中。

#属性

  • allow: 用于为 <iframe> 指定其权限策略。该策略根据请求的来源规定 <iframe> 可以使用哪些特性(例如,访问麦克风、摄像头、电池、web 共享等)。

  • allowfullscreen: 设置为 true 时,可以通过调用 <iframe> 的 requestFullscreen() 方法激活全屏模式。

  • allowpaymentrequest(废弃): 设置为 true 时,跨源的 <iframe> 就可以调用支付请求 API。

  • browsingtopics: 一个布尔属性,如果存在,则指定当前用户选定的主题应该与 <iframe> 源的请求一起发送。更多信息请参见使用主题 API。

  • credentialless: 设置为 true 可以将 <iframe> 设为无凭据模式,这意味着将内容加载到新的临时上下文中。它无法访问与其来源相关的网络、cookie 和存储数据。它使用一个新上下文(生命周期局限于顶层文档的生命周期)。作为补偿,可以解除 Cross-Origin-Embedder-Policy(COEP)嵌入规则的限制,所以设置了 COEP 的文档可以嵌入未设置的第三方文档。更多信息请参见 iFrame 无凭据模式。

  • csp: 对嵌入的资源配置内容安全策略。查看 HTMLIFrameElement.csp 获取详情。

  • height: 以 CSS 像素格式指定框架的高度。默认值为 150。

  • loading: 表示浏览器应当何时加载 iframe:

    • eager: 在页面加载时立即加载 iframe(默认值)。

    • lazy: 推迟 iframe 的加载,直到达到浏览器定义的可视视口的计算距离。目的是在浏览器确定需要它前,避免占用获取框架所需的网络和存储带宽。这改进了在大多数使用场景中的性能表现,尤其是减少了页面的首次加载时间。 备注: 只有当 JavaScript 启用时才会推迟加载。这是一个反跟踪措施。

  • name: 可定位嵌入的浏览上下文的名称。该名称可以用作 <a><form><base> 元素的 target 属性值,也可以用作 <input><button> 元素的 formtarget 属性值,还可以用作 window.open() 方法的 windowName 参数值。

  • referrerpolicy: 表示在获取 iframe 资源时发送哪个 referrer:

    • no-referrer: 不发送 Referer 标头。

    • no-referrer-when-downgrade: 向不受 TLS(HTTPS)保护的源发送请求时,不发送 Referer 标头。

    • origin: 发送的 referrer 仅包含来源(referring)页面的源(origin):其协议、主机和端口。

    • origin-when-cross-origin: 当 referrer 被发送到其他源时,其仅限于协议、主机和端口。同源的导航仍会包含路径。

    • same-origin: 对于同源请求,发送 referrer;跨源请求不会包含 referrer 信息。

    • strict-origin: 仅当被请求页面和来源页面具有相同的协议安全等级(HTTPS→HTTPS)时才发送 referrer,如果目标具有较低的安全等级(HTTPS→HTTP),则不会发送。

    • strict-origin-when-cross-origin: 当发起同源请求时,发送完整的 URL;当仅具有相同协议安全等级(HTTPS→HTTPS)时,只发送源;当目标具有较低的安全等级(HTTPS→HTTP)时,则不会发送此标头。

    • unsafe-url: 始终在 referrer 标头中包含源和路径(但不包括片段标识符、密码和用户名)。这个值是不安全的,因为这样做会向不安全的源暴露受 TLS 保护的资源的源和路径。

  • sandbox: 控制应用于嵌入在 <iframe> 中的内容的限制。该属性的值可以为空以应用所有限制,也可以为空格分隔的标记以解除特定的限制:

    • allow-scripts 当被嵌入的文档与主页面同源时,强烈建议不要同时使用 和 allow-same-origin。如果同时使用,嵌入的文档就可以删除 sandbox 属性——会使得安全性还不如不用 sandbox 属性。

    • iframe 如果攻击者可以在沙箱化的 之外展示内容,例如用户在新标签页中打开框架,那么沙箱化也就没有意义了。建议把这种内容放置到独立的来源中,以减小可能的损害。

  • src: 被嵌入的页面的 URL 地址。使用 about:blank 值可以嵌入一个遵从同源策略的空白页。还需要注意的是,在 Firefox(版本 65 及更高版本)、基于 Chromium 的浏览器、Safari/iOS 中使用代码移除 iframe 的 src 属性(例如通过 Element.removeAttribute())会导致 about:blank 被载入框架。

  • srcdoc: 要嵌入的内联 HTML,会覆盖 src 属性。其内容应遵循完整的 HTML 文档的语法(包含文档类型指令、<html><body> 标签等,虽然绝大多数标签可以被省略,仅保留主体内容)。该文档会以 about:srcdoc 作为其位置。如果浏览器不支持 srcdoc 属性,其会回退到 src 属性的 URL。

  • width: 框架的宽度(以 CSS 像素为单位)。默认值是 300。

#示例

<iframe style="width:100%;height:600px" src="https://hubenchang0515.github.io/QtTheme/"></iframe>
<iframe>

创建于 2025/5/22

更新于 2025/6/6